<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/common.css" />
</head>

<body>
    <div class="layui-container layui-text">
        <br>
        <h1>
            Layui树形表格treetable
        </h1>
        <br>
        <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn" id="btn-fold">全部折叠</button>
            <button class="layui-btn" id="btn-refresh">刷新表格</button>
        </div>
        &nbsp;
        <!-- <div class="layui-btn-group">
            <a class="layui-btn layui-btn-normal" href="menu.html">菜单管理</a>
            <a class="layui-btn layui-btn-normal" href="test.html">深度测试</a>
            <a class="layui-btn layui-btn-normal" href="test2.html">自定义图标</a>
            <a class="layui-btn layui-btn-normal" href="test3.html">多表格</a>
            <a class="layui-btn layui-btn-normal" href="test5.html">搜索功能</a>
        </div> -->
        &emsp;


        <table id="table1" class="layui-table" lay-filter="table1"></table>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="oper-col">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

    <script src="assets/layui/layui.js"></script>
    <script>
        var qwerty = {
            "code": 0,
            "msg": "ok",
            "data": [
                {
                    "id": 1,
                    "name": "xx",
                    "sex": "male",
                    "z_index": -1
                },
                {
                    "id": 2,
                    "name": "xx",
                    "sex": "male",
                    "z_index": 1
                },
                {
                    "id": 3,
                    "name": "xx",
                    "sex": "male",
                    "z_index": 1
                },
                {
                    "id": 3,
                    "name": "xx",
                    "sex": "mal66e",
                    "z_index": 1
                },
                {
                    "id": 5,
                    "name": "xx",
                    "sex": "male",
                    "z_index": -1
                },
                {
                    "id": 6,
                    "name": "xx",
                    "sex": "male",
                    "z_index": 5
                },
                {
                    "id": 7,
                    "name": "xx",
                    "sex": "male",
                    "z_index": -1
                },
                {
                    "id": 8,
                    "name": "xx",
                    "sex": "male",
                    "z_index": 6
                },
                {
                    "id": 9,
                    "name": "xx",
                    "sex": "male",
                    "z_index": 6
                },
                {
                    "id": 10,
                    "name": "xx",
                    "sex": "male",
                    "z_index": 9
                },
                {
                    "id": 11,
                    "name": "xx",
                    "sex": "male",
                    "z_index": 9
                }
            ],
            "count": 11
        }
        layui.config({
            base: 'module/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['layer', 'table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var layer = layui.layer;
            var treetable = layui.treetable;
            // treeColIndex	int	是	树形图标显示在第几列
            // treeSpid	object	是	最上级的父级id
            // treeIdName	string	否	id字段的名称
            // treePidName	string	否	pid字段的名称
            // treeDefaultClose	boolean	否	是否默认折叠
            // treeLinkage	boolean	否	父级展开时是否自动展开所有子级
            // 渲染表格
            var renderTable = function () {
                layer.load(2);
                treetable.render({
                    treeColIndex: 1,//树形图标显示在第几列
                    treeSpid: -1,//最上级的父级id
                    treeIdName: 'id',//id字段的名称
                    treePidName: 'z_index',//treePidName
                    treeDefaultClose: true,//treeDefaultClose
                    treeLinkage: false,//父级展开时是否自动展开所有子级
                    elem: '#table1',
                    // url: 'json/data.json',
                    data: qwerty.data,
                    page: false,
                    cols: [[
                        { type: 'numbers' },
                        { field: 'name', title: 'name' },
                        // { field: 'id', title: 'id' },
                        { field: 'sex', title: 'sex' },
                        // { field: 'pid', title: 'pid' },
                        { templet: '#oper-col', title: 'oper' }
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });
            };

            renderTable();

            $('#btn-expand').click(function () {
                treetable.expandAll('#table1');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#table1');
            });

            $('#btn-refresh').click(function () {
                renderTable();
            });

            //监听工具条
            table.on('tool(table1)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                if (layEvent === 'del') {
                    layer.msg('删除' + data.id);
                } else if (layEvent === 'edit') {
                    layer.msg('修改' + data.id);
                }
            });
        });
    </script>
</body>

</html>